import {useAppSelector} from "@/store/store.ts";
import {Excalidraw} from "@excalidraw/excalidraw";
import {ExcalidrawElement} from "@excalidraw/excalidraw/types/element/types";
import {KeyboardEvent, useState} from "react";

const DrawBoard = () => {
    const systemState = useAppSelector(state => state.system)
    const [elements, setElements] = useState(JSON.parse(localStorage.getItem("excalidraw-elements") ?? "[]"))
    const onChange = (elements: readonly ExcalidrawElement[]) => {
        if (elements.length != 0) {
            localStorage.setItem("excalidraw-elements", JSON.stringify(elements));
        }
        setElements(elements)
    }

    const handleKeyDown = (event:KeyboardEvent) => {
        if (event.metaKey && event.key === 'k') {
            event.preventDefault(); // 阻止默认行为
            console.log('Command + K is blocked');
        }
    };

    return (
        <div className={"h-full"}>
            <div onKeyDown={handleKeyDown} className={"h-full p-4"}>
                <Excalidraw theme={systemState.theme} initialData={{elements:elements}} onChange={onChange} />
            </div>
        </div>
    );
};

export default DrawBoard;
